<template>
	<div>
		<sh-card title="基础用法" class="mb-3">
			<sh-tabs v-bind="tabConfig1">
				<template #left>左插槽</template>
				<template #right>右插槽</template>
			</sh-tabs>
		</sh-card>
		<sh-card title="可关闭" class="mb-3">
			<sh-tabs v-bind="tabConfig1" closable></sh-tabs>
		</sh-card>
		<sh-card title="卡片模式" class="mb-3">
			<sh-tabs v-bind="tabConfig1" closable type="card"></sh-tabs>
		</sh-card>
		<sh-card title="页签在下方" class="mb-3">
			<sh-tabs v-bind="tabConfig1" closable type="card" placement="bottom"></sh-tabs>
		</sh-card>
		<sh-card title="页签在左侧" class="mb-3">
			<sh-tabs v-bind="tabConfig1" closable type="card" placement="left" style="height: 200px">
				<template #left>左插槽</template>
				<template #right>右插槽</template>
			</sh-tabs>
		</sh-card>
		<sh-card title="页签在右侧" class="mb-3">
			<sh-tabs v-bind="tabConfig1" closable type="card" placement="right"></sh-tabs>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseTabs',
	data() {
		return {
			tabConfig1: {
				options: [
					{ label: '标签一', value: 'name1', icon: 'logo-apple' },
					{ label: '标签二', value: 'name2', icon: 'logo-windows' },
					{ label: '标签三', value: 'name3', icon: 'logo-tux' },
					{ label: '标签4', value: 'name4', disabled: true },
					{ label: '标签5', value: 'name5' },
					{ label: '标签6', value: 'name6' },
					{ label: '标签7', value: 'name7' },
					{ label: '标签8', value: 'name8' },
					{ label: '标签9', value: 'name9' },
					{ label: '标签10', value: 'name10' }
				]
			}
		}
	},
	mounted() {
		// setTimeout(() => {
		// 	this.addTag()
		// }, 5000)
	},
	methods: {
		handleTabRemove(name) {
			this['tab' + name] = false
		},
		addTag() {
			const Id = this.tabConfig1.options.length + 1
			this.tabConfig1.options.push({
				label: `标签${Id}`,
				value: `name${Id}`
			})
			setTimeout(() => {
				this.addTag()
			}, 2000)
		}
	}
}
</script>

<style scoped lang="scss"></style>
